<template>
	<view class="cityStyle">
		<title @titleHeight='setPaddingTop' :center="true" title="城市选择" bgcolor="white" iconSize="38"
			@toclick="toBack(1)"icon='icon'>
		</title>
		<view class="city-search-box" :style="{'padding-top': height  + 'px'}">
			<u-search placeholder="输入城市名或拼音" v-model="condition.keyword" :show-action="false" @change="searchCity"
				@search="searchCity"></u-search>
		</view>
		<view class="city-info-box" :style="{'padding-top': boxHeight + 'px'}" v-if="condition.keyword == ''">
			<!-- 定位城市盒子 start -->
			<view class="location-city-box mb20">
				<view class="location-title-text">当前定位城市</view>
				<view class="location-city">
					<view class="flex-start align-center current-city bold fontw f36 "
						@click="chooseCity(locationData.info)">
						<image style="width: 32rpx;height: 32rpx;" src="../static/plane.png" mode=""></image> <text
							class="ml10">{{locationData.info.nm}}</text>
					</view>
					<view class="reset-location-btn" @click="getLocation(true)">
						<text class="iconfont icon-refresh1"></text>
						<text>{{locationData.text}}</text>
					</view>
				</view>
			</view>
			<!-- 定位城市盒子 end -->

			<!-- 热门城市盒子 start -->
			<view class="location-city-box">
				<view class="location-title-text f28">热门城市</view>
				<view class="hot-city-box">
					<view class="city-tag-item" :class="{'red-color': locationData.light === index}"
						v-for="(item, index) in cityInfo.hot" :key="index" @click="chooseCity(item)">
						{{item.cityName}}
					</view>
				</view>
			</view>
			<!-- 热门城市盒子 end -->

			<!-- 城市列表盒子 start -->
			<view class="index-list-box ph20">
				<index-list :index-list="cityInfo.index" :distanceTop="distanceTop" :scrollTop="scrollTop"
					active-color="#ff003d" :offset-top="boxHeight | pxChangeRpx('rpx')" v-if="boxHeight != 0">
					<view v-for="(item, index) in cityInfo.city" :key="index">
						<u-index-anchor :index="item.letter"
							:custom-style="{'font-size':'28rpx','font-weight':'400','padding-left':'0','border-bottom':'1rpx solid #ebedef'}" />
						<view class="list-cell city-item-box" v-for="(city, cityIndex) in item.data" :key="cityIndex"
							@click="chooseCity(city)">
							{{city.cityName}}
						</view>
					</view>
				</index-list>
			</view>
			<!-- 城市列表盒子 end -->
		</view>
		<!-- 搜索内容盒子 start -->
		<scroll-view scroll-y="true" class="search-list-box"
			:style="{'margin-top': boxHeight + 'px', height: scrollBox + 'px'}" v-if="condition.keyword != ''">
			<view class="list-cell" v-for="(item, index) in searchData" :key="index" @click="chooseCity(item)">
				{{item.cityName}}</view>
		</scroll-view>
		<!-- 搜索内容盒子 end -->
	</view>
</template>

<script>
	import title from '@/pages/components/title.vue'
	import indexList from '@/pages/components/u-index-list.vue'
	// import { cityData } from '@/public/city.js'
	export default {
		data() {
			return {
				timer: '',
				scrollTop: 0,
				distanceTop: 0,
				boxHeight: 0,
				scrollBox: 0,
				height: 0,
				condition: {
					keyword: '',
				},
				cityInfo: {},
				locationData: { //定位数据
					text: '重新定位', //提示
					loaded: true, //定位状态
					info: {}, //定位信息
					light: ''
				},
				searchData: [],
				locCity: '',
			}
		},
		components: {
			title,
			indexList
		},
		onShow() {
			this.locationData.info = JSON.parse(uni.getStorageSync('loc') || '{"nm": "定位失败"}')
			this.gitCityData()
		},
		methods: {
			setPaddingTop(data) {
				this.height = data.height
				this.$nextTick(() => {
					this.getDom()
				})
			},
			//处理定位数据
			setData() {
				this.locCity = this.$common.getCityInfo()
				this.locationData.light = Number(this.cityInfo.hot.findIndex(item => item.cityName == this.locCity.nm))
			},
			//返回
			toBack(index) {
				this.$common.toBack(index)
			},
			//设置盒子高度
			getDom() {
				let query = uni.createSelectorQuery().in(this)
				query.selectAll('.city-search-box').boundingClientRect(res => {
					let height = res[0] ? res[0].height : 0
					this.boxHeight = height
					this.distanceTop = height
					this.scrollBox = this.$store.state.windowHeight - this.distanceTop
				}).exec()
			},
			//获取城市数据
			gitCityData() {
				uni.showLoading({
					title: '加载中'
				})
				this.$api.getCityData().then(res => {
					this.cityInfo = res.data.data
					this.setData()
					uni.hideLoading()
				})
			},
			//重新定位
			getLocation(back) {
				if (this.locationData.loaded) {
					this.locationData.loaded = false
					this.locationData.text = '定位中...'
					uni.showLoading({
						title: '定位中'
					})
					this.getLocalCity(() => {
						this.locationData.loaded = true
						this.locationData.text = '重新定位'
						uni.hideLoading()
						if (back) {
							
							// console.log(this.$store.state.isChangeCondition,'前');
							this.$store.commit('setChooseCondition', true)
							// console.log(this.$store.state.isChangeCondition,'后');
							
							this.setData()
							// 	this.$common.toBack(1)
						}
					})
				}
			},
			//获取当前定位
			getLocalCity(callback) {
				this.$common.getNowLocation((success) => {
					this.$api.getLocalCity({
						lat: success.latitude,
						lng: success.longitude,
					}).then(res => {
						let locaCity = {
							...res.data.data,
							lat: success.latitude,
							lng: success.longitude
						}
						this.$store.commit('setLocCity', locaCity)
						this.$store.commit('setChooseLoc', locaCity)
						uni.setStorageSync('loc', JSON.stringify(this.$store.state.locCity))
						uni.setStorageSync('chooseloc', JSON.stringify(this.$store.state.chooseLoc))
						this.locationData.info = this.$store.state.locCity
						callback()
					})
				}, (error) => {
					// setTimeout(() => {
					this.locationData.loaded = true
					this.locationData.text = '重新定位'
					uni.hideLoading()
					// uni.showToast({
					// 	icon: 'none', 
					// 	title: '定位失败'
					// })
					// }, 1000)
				})
			},
			//城市搜索
			searchCity() {
				this.$common.inputDebounce(this, () => {
					this.searchData = []
					if (this.condition.keyword.length > 0) {
						this.cityInfo.city.map(item => {
							item.data.map(city => {
								if (city.cityName.indexOf(this.condition.keyword) > -1) {
									this.searchData.push(city)
								}
							})
						})
					}
				})
			},
			//选择城市
			chooseCity(item) {
				// 触发dropdown-group中重置信息的页面
				this.$store.commit('setChooseCondition', true)
				// console.log(this.$store.state.isChangeCondition)

				this.$store.commit('setChooseLoc', {
					id: item.id,
					nm: item.cityName || item.nm,
					update_time: new Date().getTime()
				})
				uni.setStorageSync('chooseloc', JSON.stringify(this.$store.state.chooseLoc))
				this.$common.toBack(1)
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style lang="scss" scoped>
	.cityStyle {
		.city-search-box {
			position: fixed;
			width: 100%;
			background-color: #FFF;
			top: 0;
			z-index: 998;
			padding: 0 30rpx 20rpx;
		}

		.city-info-box {
			// padding: 0 20rpx;
			background-color: #F4F4F4;

			.location-city-box {
				padding-top: 10rpx;
				width: 100%;
				background-color: #FFFFFF;

				&:first-of-type {
					padding: 10rpx 20rpx 32rpx 20rpx;
				}

				&:nth-of-type(2) {
					padding: 32rpx 20rpx 0 20rpx;
				}

				.location-title-text {
					margin-bottom: 25rpx;
					font-size: 28rpx;
					color: #666666;
				}

				.location-city {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.current-city {
						color: #2E2E2E;
					}

					.reset-location-btn {
						color: #FF4345;
						font-weight: 500;
						font-size: 24rpx;
						margin-right: 20rpx;
						padding-top: 2rpx;
						display: flex;

						.iconfont {
							display: inline-block;
							padding-top: 4rpx;
						}
					}
				}

				.hot-city-box {

					// display: flex;
					// justify-content: space-between;
					// flex-wrap: wrap;
					.city-tag-item {}
				}
			}

			.index-list-box {
				background-color: #FFFFFF;

				/deep/.u-index-anchor {
					left: 0;
					font-size: 28rpx;
					color: #666666;
					font-weight: 400;
					background-color: #FFF;
					padding: 48rpx 10rpx 22rpx 10rpx;
				}

				/deep/.u-index-bar__sidebar {
					top: 55%;

					.u-index-bar__index {
						padding: 6rpx 18rpx 6rpx 0;
					}
				}
			}
		}

		/deep/.list-cell {
			display: flex;
			box-sizing: border-box;
			width: 100%;
			padding: 10px 0rpx;
			overflow: hidden;
			color: #2E2E2E;
			font-size: 14px;
			line-height: 24px;
			background-color: #fff;
			border-bottom: 1rpx solid #ebedef;
		}

		.search-list-box {
			padding: 0 36rpx;
		}
	}
</style>
